<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="div1">
			<div class="fl">
				左边
			</div>
			<div class="fr">
				右边
			</div>
			<div class="clear">
				
			</div>
		</div>
		
		<div class="div2">
			div2
		</div>
		
		
	</body>
</html>

<style type="text/css">
	.div1 {
		width: 300px;
		border: 1px solid red;
	}
	.fl,.fr {background: green;height: 50px;line-height: 50px;}
	.fl { float: left; }
	.fr { float: right; }
	/* 清除.fl和.fr浮动 */
	.div2 {
		height: 100px;
		width: 300px;
		background: gray;
		border: 1px solid orange;
	}
	.clear {
		clear: both;
	}
	
	
</style>